/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/*
 * Copyright (c) 2014, Joyent, Inc.
 */

#page-networks {
  .network-pools-list {

    .network-pool-header {
      .widget-header;
      cursor: pointer;
      font-size: 12px;
      padding: 10px;

      .name {
        margin-right: 20px;
        width: 300px;
        display: inline-block;
        color: @link-color;
        font-weight: bold;
      }
      .uuid {
        float: right;
        color: @gray-light;
        font-family: @font-family-monospace;
      }
      .edit { margin-left: 20px; float: right; font-weight: bold; visibility: hidden;};
      .delete { margin-left: 20px; font-weight: bold; color: @state-danger-text; float: right; visibility: hidden;}

      &:hover .delete { text-decoration: none; visibility: visible; }
      &:hover .edit { text-decoration: none; visibility: visible; }

      .network-count { font-style: italic; font-size: 10px; text-transform: uppercase; color: @gray-light;}
    }
  }

  .networks-list {
    li {
      &.hover { background: @state-warning-bg; }
      .widget-content;
      display: block;
      padding: 10px;
      margin-bottom: 1px;

      &>div { vertical-align:top; display: inline-block; }
      strong { display: block; }
      .provision-ip-range {
        width: 200px;
      }
      .resolvers { width: 120px; }
      .owners { width: 245px; }
      .gateway { width: 100px; }
      .name {
        width: 240px;
        a { display: block; clear: both; font-weight: bold; }
      }
      .subnet {
        color: @gray-dark;
        font-family: @font-family-monospace;
        font-size: 10px;
      }
      .vlan {
        width: 60px;
      }
      .mtu {
        width: 150px;
      }
      strong {font-size: 12px; color: @gray-light;}
      .actions {
        a.delete {color: @state-danger-text; text-decoration: none; font-weight: bold;}
        float: right; vertical-align: middle; color: @state-danger-text; visibility: hidden;}
        a.edit {margin-right: 10px;}
      &:hover .actions {visibility: visible;}
      .value {
        color: @gray-dark;
        font-family: @font-family-monospace;
        font-size: 10px;
      }
    }
  }
  .input-group-btn {
    vertical-align: top;
  }
  .filters {
    position: relative;
    display: table;
    border-collapse: separate;
    > div {
      padding-left: 0;
    }
    .nictag {
      min-height: 40px;
      span {
        display: inline-block;
        width: 24%;
        white-space: nowrap;
      }
      select.form-control {
        display: inline-block;
        width: 74%;
      }
    }
  }

}

